/*添加教师的js代码在addTeacher.js*/
var TeachersPage=React.createClass({
	getInitialState:function(){
		return {teachers:[]};
	},
	componentDidMount:function(){
	  $.ajax({
	    url:config.api.getStudioTeachers[0].replace(/\<\w+\>/,this.props.studioId),
	    type:config.api.getStudioTeachers[1],
	    success:function(d){
	       this.setState({teachers:d.teachers});
	    }.bind(this),
	    error:function(){
	      alert("获取数据出错");
	    }
	  });
	},
	reload:function(){
		$.ajax({
		  url:config.api.getStudioTeachers[0].replace(/\<\w+\>/,this.props.studioId),
		  type:config.api.getStudioTeachers[1],
		  success:function(d){
		     this.setState({teachers:d.teachers});
		  }.bind(this),
		  error:function(){
		    alert("更新出错");
		  }
		});
	},
	render:function () {
		// if(this.state.teachers.length==0){
		// 	return (
		// 	<div className="TeachersPage">
		// 		<div className="teacherToolBar">
		// 			<a href="#" className="addTeacher" data-toggle="modal" data-target="#addTeacherModal">添加老师</a>
		// 		</div>
		// 		<TeacherList teachers={this.state.teachers} studioId={this.props.studioId} reload={this.reload}/>
		// 	</div>
		// 		);
		// }else{
			return (
			
			<div className="TeachersPage">
				<div className="teacherToolBar">
					<a href="#" className="addTeacher" data-toggle="modal" data-target="#addTeacherModal">添加老师</a>
				</div>
				<TeacherList teachers={this.state.teachers} studioId={this.props.studioId} reload={this.reload}/>
			</div>
				);
		// }

	}
});
var TeacherList=React.createClass({
	componentDidMount:function(){
		$(document).on("click","#addTeacherBtn",this.addTeacher);
		//$("#addTeacherBtn").on("click",this.addTeacher);
	},
	addTeacher:function(){
		var studioId=cookie.getCookie("studioId");
		var teacherId=$("#addTeacherID").val();
		var teacherName=$("#addTeacherName").val();
		var self=this;
		if(teacherId==""&&teacherName==""){
			alert("教师名和ID至少要提供一个");
			return;
		}else if(!studioId){
			alert("请先登录");
			
			return;
		}else{
			$.ajax({
				url:config.api.addTeacher[0].replace(/\<\w+\>/,studioId),
				type:config.api.addTeacher[1],
				data:{
					userId:teacherId,
					userName:teacherName
				},
				success:function(){
					self.emptyInput_addTeacher();
					self.props.reload();
				},
				error:function(){
					alert("添加失败");
				}
			});
		}
	},
    emptyInput_addTeacher:function(){
		var $inputs=$("#addTeacherModal").find("input");
		$inputs.val("");
	},
	render:function(){
		var self=this;
		if(this.props.teachers.length>0){
			return (
				<div>
					<ul className="TeacherList">
						{
							this.props.teachers.map(function(teacher){
								return (<TeacherItem avatarUrl={teacher.avatarUrl} name={teacher.name} userId={teacher.userId} studioId={self.props.studioId} reload={self.props.reload}/>);
							})
						}
					</ul>
					<div className="modal fade" id="addTeacherModal" tabindex="-1" role="dialog" aria-labelledby="addTeacherModalLabel" aria-hidden="true">
					  <div className="modal-dialog">
					    <div className="modal-content addTeacherContainer">
					        <div className="addTeacherInputContainer">
					           <label for="addTeacherName">用户名</label>
					           <input type="text" id="addTeacherName"/>
					        </div>
					        <div className="addTeacherInputContainer">
					          <label for="addTeacherID">ID</label>
					          <input type="text" id="addTeacherID"/>
					        </div>
					        <div className="addTeacherActionBtns">
					          <button id="addTeacherBtn">确定</button>
					          <button  data-dismiss="modal" id="cancelAddTeacherBtn">取消</button>
					        </div>
					        
					    </div>
					  </div>
					</div>
				</div>
				);
		}else{
			return (
				<div>
					<ul className="TeacherList">
						<li>暂无教师</li>
					</ul>
					<div className="modal fade" id="addTeacherModal" tabindex="-1" role="dialog" aria-labelledby="addTeacherModalLabel" aria-hidden="true">
					  <div className="modal-dialog">
					    <div className="modal-content addTeacherContainer">
					        <div className="addTeacherInputContainer">
					           <label for="addTeacherName">用户名</label>
					           <input type="text" id="addTeacherName"/>
					        </div>
					        <div className="addTeacherInputContainer">
					          <label for="addTeacherID">ID</label>
					          <input type="text" id="addTeacherID"/>
					        </div>
					        <div className="addTeacherActionBtns">
					          <button id="addTeacherBtn">确定</button>
					          <button  data-dismiss="modal" id="cancelAddTeacherBtn">取消</button>
					        </div>
					        
					    </div>
					  </div>
					</div>
				</div>
				);
		}

	}	
});
var TeacherItem=React.createClass({
	deleteTeacher:function(e){
		var c=confirm("确定要删除？");
		if(c){
			var idToDelete=$(e.target).prev().text();
			$.ajax({
			  url:config.api.deleteTeacher[0].replace(/\<\w+\>/,this.props.studioId),
			  type:config.api.deleteTeacher[1],
			  data:{
			  	userId :idToDelete
			  },
			  success:function(d){
			     this.props.reload();//刷新页面
			  }.bind(this),
			  error:function(){
			    alert("删除失败");
			  }
			});
		}

	},
	render:function(){
		return (
			<li className="TeacherItem">
				<img src={this.props.avatarUrl} alt=""/>
				<h4>{this.props.name}</h4>
				<h5>{this.props.userId}</h5>
				<a href="#" className="deleteBtn" onClick={this.deleteTeacher}>删除</a>
			</li>
			);
	}	
});